<template>
  <div class="container">
    <h1>功能建模</h1>
    
    <div class="form-section">
      <div class="form-row">
        <div class="form-group">
          <label for="projectName">项目名称</label>
          <select id="projectName" v-model="formData.projectName">
            <option value="">请选择项目名称</option>
            <option value="水杯系统">水杯系统</option>
            <option value="汽车系统">汽车系统</option>
            <option value="手机系统">手机系统</option>
          </select>
        </div>
        <div class="form-group">
          <label for="analysisName">功能分析名称</label>
          <select id="analysisName" v-model="formData.analysisName">
            <option value="">请选择功能分析名称</option>
            <option value="谭少的水杯系统功能分析">谭少的水杯系统功能分析</option>
            <option value="康爷的水杯系统功能分析">康爷的水杯系统功能分析</option>
            <option value="兰姨的水杯系统功能分析">兰姨的水杯系统功能分析</option>
          </select>
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="functionCarrier">功能载体</label>
          <select id="functionCarrier" v-model="formData.functionCarrier">
            <option value="">请选择功能载体</option>
            <option value="杯底">杯底</option>
            <option value="杯身">杯身</option>
            <option value="水">水</option>
            <option value="人">人</option>
          </select>
        </div>
        <div class="form-group">
          <label for="functionObject">功能对象</label>
          <select id="functionObject" v-model="formData.functionObject">
            <option value="">请选择功能对象</option>
            <option value="杯底">杯底</option>
            <option value="杯身">杯身</option>
            <option value="水">水</option>
            <option value="人">人</option>
          </select>
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="functionName">功能名称</label>
          <input type="text" id="functionName" v-model="formData.functionName">
        </div>
        <div class="form-group">
          <label for="functionCategory">功能分类</label>
          <select id="functionCategory" v-model="formData.functionCategory">
            <option value="">请选择功能分类</option>
            <option value="有用">有用</option>
            <option value="有害">有害</option>
          </select>
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="performanceLevel">性能水平</label>
          <select id="performanceLevel" v-model="formData.performanceLevel">
            <option value="">请选择性能水平</option>
            <option value="不足">不足</option>
            <option value="正常">正常</option>
            <option value="过量">过量</option>
          </select>
        </div>
        <div class="form-group">
          <label for="description">说明</label>
          <input type="text" id="description" v-model="formData.description">
        </div>
      </div>
      
      <div class="form-row">
        <div class="form-group">
          <label for="imageUpload">图片上传</label>
          <input type="file" id="imageUpload" accept="image/*" @change="handleImageUpload">
          <img id="imagePreview" class="image-preview" :src="imagePreviewUrl" alt="图片预览" v-show="imagePreviewUrl">
        </div>
      </div>
      
      <div class="button-group">
        <button class="add-btn" @click="addFunction">增加</button>
        <button class="cancel-btn" @click="cancel">取消</button>
        <button class="delete-btn" @click="deleteFunction">删除</button>
      </div>
    </div>
    
    <h2>功能关系表</h2>
    <div class="table-section">
      <table id="functionTable">
        <thead>
          <tr>
            <th>序号</th>
            <th>功能载体</th>
            <th>功能对象</th>
            <th>功能名称</th>
          </tr>
        </thead>
        <tbody id="functionTableBody">
          <tr v-for="(item, index) in tableData" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ item.carrier }}</td>
            <td>{{ item.object }}</td>
            <td>{{ item.name }}</td>
          </tr>
        </tbody>
      </table>
    </div>
    
    <h2>功能模型图</h2>
    <div id="modelChart" class="chart-section" ref="chartContainer"></div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import * as echarts from 'echarts';

// 响应式数据
const formData = reactive({
  projectName: '',
  analysisName: '',
  functionCarrier: '',
  functionObject: '',
  functionName: '',
  functionCategory: '',
  performanceLevel: '',
  description: ''
});

const imagePreviewUrl = ref('');
const tableData = ref([]);
const chartContainer = ref(null);
let myChart = null;

// 图片上传处理
const handleImageUpload = (event) => {
  const file = event.target.files[0];
  if (file) {
    const reader = new FileReader();
    reader.onload = (e) => {
      imagePreviewUrl.value = e.target.result;
    };
    reader.readAsDataURL(file);
  }
};

// 添加功能
const addFunction = () => {
  if (formData.functionCarrier && formData.functionObject && formData.functionName) {
    // 添加到表格
    tableData.value.push({
      carrier: formData.functionCarrier,
      object: formData.functionObject,
      name: formData.functionName
    });
    
    // 更新图表
    updateChart();
  }
};

// 取消操作
const cancel = () => {
  // 清空表单
  Object.keys(formData).forEach(key => {
    formData[key] = '';
  });
  imagePreviewUrl.value = '';
};

// 删除功能
const deleteFunction = () => {
  if (formData.functionCarrier && formData.functionObject) {
    // 从表格中删除
    tableData.value = tableData.value.filter(item => 
      !(item.carrier === formData.functionCarrier && item.object === formData.functionObject)
    );
    
    // 更新图表
    updateChart();
  }
};

// 更新图表
const updateChart = () => {
  if (!myChart) return;
  
  const nodes = [];
  const edges = [];
  
  // 收集所有节点
  const nodeSet = new Set();
  tableData.value.forEach(item => {
    nodeSet.add(item.carrier);
    nodeSet.add(item.object);
  });
  
  // 转换节点数据
  nodeSet.forEach(node => {
    nodes.push({
      name: node,
      symbolSize: 50,
      itemStyle: {
        color: nodes.length % 2 === 0 ? '#4CAF50' : '#2196F3'
      }
    });
  });
  
  // 转换边数据
  tableData.value.forEach(item => {
    edges.push({
      source: item.carrier,
      target: item.object,
      label: {
        show: true,
        formatter: item.name
      },
      lineStyle: {
        color: '#FF9800'
      }
    });
  });
  
  // 更新图表
  myChart.setOption({
    series: [{
      data: nodes,
      edges: edges
    }]
  });
};

// 组件挂载后初始化图表
onMounted(() => {
  // 初始化图表
  myChart = echarts.init(chartContainer.value);
  
  const option = {
    title: {
      text: '功能模型图'
    },
    tooltip: {},
    animationDurationUpdate: 1500,
    animationEasingUpdate: 'quinticInOut',
    series: [{
      type: 'graph',
      layout: 'force',
      force: {
        repulsion: 200,
        edgeLength: 100
      },
      roam: true,
      focusNodeAdjacency: true,
      draggable: true,
      data: [],
      edges: [],
      label: {
        show: true,
        position: 'inside'
      },
      edgeLabel: {
        show: true,
        formatter: '{c}'
      },
      lineStyle: {
        width: 2,
        curveness: 0.2
      },
      emphasis: {
        lineStyle: {
          width: 4
        }
      }
    }]
  };
  
  myChart.setOption(option);
  
  // 窗口大小变化时调整图表
  window.addEventListener('resize', () => {
    myChart.resize();
  });
});
</script>

<style scoped>
.container {
  max-width: 1200px;
  margin: 0 auto;
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
h1 {
  text-align: center;
  color: #333;
  margin-bottom: 30px;
}
.form-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 15px;
}
.form-group {
  flex: 1;
  min-width: 200px;
  margin-right: 15px;
  margin-bottom: 10px;
}
label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}
input[type="text"], 
input[type="file"],
select,
textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
.button-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}
button {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}
.add-btn {
  background-color: #4CAF50;
  color: white;
}
.cancel-btn {
  background-color: #f44336;
  color: white;
}
.delete-btn {
  background-color: #ff9800;
  color: white;
}
.chart-section {
  height: 500px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 10px;
  margin-top: 20px;
}
.image-preview {
  margin-top: 10px;
  max-width: 200px;
  max-height: 200px;
}
h2 {
  text-align: center;
  color: #333;
  margin: 20px 0;
}
.table-section {
  margin: 30px 0;
  overflow-x: auto;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}
th, td {
  border: 1px solid #ddd;
  padding: 12px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
  font-weight: bold;
}
tr:nth-child(even) {
  background-color: #f9f9f9;
}
tr:hover {
  background-color: #f1f1f1;
}
</style>